<template>
  <div class="app-container">
    <el-row :gutter="6">
      <el-col :span="6">
        <el-input
          v-model="filterFormText"
          clearable
          placeholder="输入关键字进行过滤" />
        <el-tree
          ref="formTree"
          :data="formTreeData"
          :props="defaultProps"
          :filter-node-method="filterFormNode"
          :highlight-current="true"
          node-key="id"
          default-expand-all
          @node-click="handleFormTreeClick"
        >
          <span slot-scope="{ node, data }">
            <svg-icon icon-class="user"/>
            {{ data.formName }}
          </span>
        </el-tree>
      </el-col>
      <el-col :span="18">
        <eHeader :param-bean="paramBean" :sup_this="sup_this" :form-info="formInfo" />
        <eForm ref="form" :sup_this="sup_this" />
        <!--表格渲染-->
        <DataGridTable
          v-loading="loading"
          ref="mainTable"
          :sup_this="sup_this"
          :data="data.rtnList"
          :total="total"
          :show-cell-class="true"
          row-key="id"
          @selection-change="handleGridSelectionChange">
          <el-table-column label="标题" prop="applyName" />
          <el-table-column label="业务类型" prop="selfStateName">
            <template slot-scope="scope">
              <edit :data="scope.row" :sup_this="sup_this" />
            </template>
          </el-table-column>
          <el-table-column prop="selfStateName" label="状态"/>
          <el-table-column :show-overflow-tooltip="true" prop="createDate" label="申请日期">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="lastUpdateDate" label="更新日期">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.lastUpdateDate) }}</span>
            </template>
          </el-table-column>
        </DataGridTable>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { parseTime } from '@/utils/index'
import eHeader from './module/header'
import edit from './module/edit'
import eForm from './module/FormDisplay'
import initData from '@/mixins/initData'
import { loadDataUrl } from '@/api/system/formApply'
import { getFormApplyTreeData } from '@/api/system/formSet'

export default {
  components: { eHeader, edit, eForm },
  mixins: [initData],
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'formName'
      },
      filterFormText: '',
      formTreeData: [],
      formInfo: {
        sysGenCode: '',
        formType: ''
      },
      formName: '',
      delLoading: false, sup_this: this
    }
  },
  watch: {
    filterFormText(val) {
      const _thisForm = this.$refs.formTree
      if (_thisForm) {
        _thisForm.filter(val)
      }
    }
  },
  created() {
    getFormApplyTreeData().then(res => {
      this.formTreeData = res.data
    })
    this.url = loadDataUrl()
    this.defaultParamBean.formTypes = ['OA', 'OTHER']
    this.defaultParamBean.selfStateList = ['0', '5', '4'] // 默认加载草稿，待审批，审批不通过的数据
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    checkPermission,
    beforeInit() {
      return true
    },
    afterInit(res) {
    },
    handleFormTreeClick(data) {
      this.formInfo = data
      this.paramBean.formCode = data.sysGenCode
      this.paramBean.formType = data.formType
      this.init()
    },
    filterFormNode(value, data) {
      if (!value) return true
      return data.formName.indexOf(value) !== -1
    }
  }
}
</script>

<style scoped>

</style>
